<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="fn()">保存</button>
		<script type="text/javascript">
			//-------------------传统注册方式----------------------------------------------------
			function fn() {
				console.log("abc");
			}

			var button = document.querySelector('button');
			button.onclick = function() {
				console.log("123");
			}

			button.onclick = null; //删除事件
			/*
			   1.传统注册方式
			    1.1标签的on开头的属性
			    1.2标签对象的on开头的属性
			   特点:注册的事件的唯一性
			  2.删除事件        							
			*/

			//-------------------方法监听注册方式(推荐) 同时注册多个事件处理程序----------------------------------------------------
			function fn1() {
				console.log("方法监听方式注册1");
			}
			button.addEventListener('click', fn1);

			function fn2() {
				console.log("方法监听方式注册2");
			}

			button.addEventListener('click', fn2);

            //删除事件（解绑）
			button.removeEventListener('click', fn1);
			button.removeEventListener('click', fn2);
		</script>
	</body>
</html>
